<template>
  <div class="tinymce-editor-dialog">
    <el-dialog :class="'el-dialog-theme3'" v-model="dialogVisible" title="预览" append-to-body
      :fullscreen="isFullscreen" width="1000px">
      <div :style="{
        height: contentHeight + 'px',
      }">
        <iframe style="width: 100%; height: 100%" sandbox="allow-scripts allow-same-origin" data-alloy-tabstop="true"
          tabindex="-1" :srcdoc="data"></iframe>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button v-if="isFullscreen" @click="toggleFullscreen(true)">
            退出全屏
          </el-button>
          <el-button v-else @click="toggleFullscreen(false)"> 全屏 </el-button>
          <el-button @click="dialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity';
export default {
  setup() {
    const dialogVisible = ref(false);
    const isFullscreen = ref(false);
    const data = ref("");
    const contentHeight = ref(500);

    function changedDialogVisible(val) {
      dialogVisible.value = val;
    }
    function setData(val) {
      console.log(data.value);
      data.value = val;
    }
    //全屏函数
    function toggleFullscreen(isFull) {
      if (isFull) {
        isFullscreen.value = false;
        contentHeight.value = 500;
      } else {
        contentHeight.value =
          document.documentElement.clientHeight - 54 - 62 - 60;
        isFullscreen.value = true;
      }
    }
    return {
      dialogVisible,
      data,
      isFullscreen,
      contentHeight,
      toggleFullscreen,
      changedDialogVisible,
      setData,
    };
  },
};
</script>

<style lang="scss">
// :deep .el-dialog__body {
//   color: red !important;
// }
.tinymce-editor-dialog {
  .el-dialog__body {
    color: inherit !important;
    margin: 0 !important;
  }
}

.el-dialog:not(.is-fullscreen) {
  margin-top: 4vh !important;
}
</style>